
<template>
    <div class="demo"> 
        <h5>当前加为：{{countStore.sum}}</h5>
        <h6>我是<span style="color:orange">{{countStore.name}}</span>,也是你们口中的<span style="color:red">{{countStore.niko}}!</span></h6>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="incr">加</button>
        <button @click="decr">减</button>
    </div>
    
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useCountStore } from '../../store/count'
import { storeToRefs } from 'pinia'

const countStore = useCountStore()
//storeToRefs只会关注store中的数据，不会对方法进行ref包裹
const { sum, name, niko } = storeToRefs(countStore)
let n = ref(1)
function incr() {
    //修改数据方式一：
    //countStore.sum += n.value

    //方式二：
    /*
    countStore.$patch({
        sum:999,
        name:'洪',
        niko:"地球第一强者"
    })
    
    
    */
    
    //方式三：
   countStore.increment(n.value)
}

function decr() {
    //方式二：
    countStore.$patch((state) => {
        state.sum -= n.value
        state.name = '洪'
        state.niko = "地球第一强者"
    })
}

</script>

<style scoped>
    .demo {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 550px;
        margin: 10px;
    }
    button  { 
        margin: 5px 5px;

    }

</style>